.AmbrTooltip {
	--bg-color: #2b2b2b;
	--text-color: #fff;
	--gradient-size: 8em;
	--current-color: white;
}

.AmbrTooltip {
	position: absolute;
	font-size: 0.9em;
	color: var(--text-color);
	padding: 1em;
	border-radius: 0.8em;
	width: 22em;
	z-index: 1000;
	box-shadow: 0.2em 0.2em 1em rgb(0, 0, 0, 0.7);
	pointer-events: none;
	line-height: 1.5;
	max-height: calc(min(85vh, 40em));
	display: flex;
	flex-direction: column;
	background: linear-gradient(195deg,
			var(--fade-color, transparent) 0em,
			transparent var(--gradient-size));
	background-color: var(--bg-color) !important;
}

.AmbrTooltip.gi {
	font-family: Shinshin;
}

.AmbrTooltip.hsr {
	font-family: Nunito Variable;
}

.AmbrTooltip.zzz {
	font-family: zzz;
}

.AmbrTooltip .name {
	font-size: 1.25em;
	text-align: left;
	position: relative;
	left: 0.15em;
	padding-bottom: 0.3em;
}

.AmbrTooltip.hsr .name {
	font-size: 1.5em;
	letter-spacing: 0.05em;
	line-height: 1.25;
	font-weight: 600;
	padding-bottom: 0.5em;
}

.AmbrTooltip.zzz .name {
	font-size: 1.1em;
	letter-spacing: 0.03em;
	align-items: end;
	display: block;
	gap: 0.2em;
}


.AmbrTooltip .nameSvg.rotate {
	width: 1.7em;
	margin-top: -2em;
	transform: translateY(25%) rotateX(180deg);
	margin-left: -0.3em;
}

.AmbrTooltip.hsr .nameSvg.rotate {
	width: 1.4em;
	transform: translateY(24%) rotateX(180deg);
}

.AmbrTooltip.zzz .nameSvg.mindscape {
	width: 1.7em;
	margin-top: -2em;
	margin-right: 0.3em;
	transform: translateY(22%);
}

.AmbrTooltip .context {
	/* font-family: "Open Sans"; */
	position: relative;
	display: flex;
	gap: 0.3em;
	font-size: 0.9em;
	opacity: 0.7;
	left: 0.15em;
	top: -0.3em;
	padding-top: 0.25em;

	.contextIcon {
		width: 1.5em;
		height: 1.5em;
		background-size: contain;
	}
}

.AmbrTooltip.hsr .context {
	font-size: 0.95em;
	font-weight: 500;

	.contextIcon {
		width: 1.35em;
		height: 1.35em;
	}
}

.AmbrTooltip.zzz .context {
	font-size: 0.8em;
	font-weight: 200;
	letter-spacing: 0.05em;

	.contextIcon {
		width: 1.2em;
		height: 1.2em;
		background-repeat: no-repeat;
		background-position: center;
	}
}


.AmbrTooltip .icon {
	width: 6em;
	height: 6em;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: -2.5em;
	margin-top: -2.5em;
	margin-right: 1em;
	margin-bottom: 0.5em;
	background-color: var(--bg-color);
	border-radius: 0.8em;
	box-shadow: 0.2em 0.2em 1em rgb(0, 0, 0, 0.7);
	float: left;
	z-index: 2000;
}

/* .AmbrTooltip.hsr .icon {
	background-color: transparent;
	box-shadow: none;
	height: 7.5em;
	width: 6em;
	margin-right: 0.5em;
	margin-left: -3.5em;
	margin-top: -3.5em;
	margin-bottom: 0.2em;
} */


.AmbrTooltip .icon.talent {
	border-radius: 100em;
}

.AmbrTooltip .iconContainer {
	position: relative;
	height: 100%;
	width: 100%;
}

.AmbrTooltip .icon .image {
	position: absolute;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.AmbrTooltip .icon.talent .image {
	height: 70%;
}

.AmbrTooltip.hsr .icon.talent .image {
	height: 85%;
}

.AmbrTooltip.hsr .icon.artifact .image {
	height: 90%;
}

.AmbrTooltip.zzz .icon.talent .image {
	height: 85%;
}

.AmbrTooltip.zzz .icon.artifact .image {
	height: 90%;
}

.AmbrTooltip .iconContainer svg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	opacity: 0.8;
	color: #00000090;
}

.AmbrTooltip.zzz .iconContainer svg {
	opacity: 1;
	height: 82%;
}

.AmbrTooltip .talent.Rock svg {
	color: #4a3a1890 !important;
}

.AmbrTooltip .talent.Wind svg {
	color: #1d4d4790 !important;
}

.AmbrTooltip .talent.Ice svg {
	color: #193d4390 !important;
}

.AmbrTooltip .talent.Water svg {
	color: #18293e90 !important;
}

.AmbrTooltip .talent.Electric svg {
	color: #34123b90 !important;
}

.AmbrTooltip .talent.Fire svg {
	color: #54190090 !important;
}

.AmbrTooltip .talent.Grass svg {
	color: #13451790 !important;
}

.AmbrTooltip.Rock {
	--fade-color: rgba(78, 57, 12, 0.5);
}

.AmbrTooltip.Wind {
	--fade-color: rgba(18, 95, 72, 0.5);
}

.AmbrTooltip.Ice {
	--fade-color: rgba(13, 92, 102, 0.5);
}

.AmbrTooltip.Water {
	--fade-color: rgba(10, 61, 124, 0.5);
}

.AmbrTooltip.Electric,
.AmbrTooltip.Thunder {
	--fade-color: rgba(71, 16, 58, 0.5);
}

.AmbrTooltip.Fire {
	--fade-color: rgba(90, 32, 8, 0.5);
}

.AmbrTooltip.Grass {
	--fade-color: rgba(5, 48, 8, 0.5);
}

.AmbrTooltip.Imaginary {
	--fade-color: rgba(121, 102, 39, 0.5);
}

.AmbrTooltip.Quantum {
	--fade-color: rgba(37, 32, 87, 0.5);
}

.AmbrTooltip.Physical {
	--fade-color: rgba(105, 105, 105, 0.5);
}

.AmbrTooltip.Elec {
	--fade-color: rgba(24, 88, 170, 0.4);
}

.AmbrTooltip.Physics {
	--fade-color: rgba(109, 103, 49, 0.5);
}

.AmbrTooltip.Ether {
	--fade-color: rgba(120, 60, 122, 0.5);
}


.AmbrTooltip.Rarity-1 {
	--fade-color: rgba(73, 73, 73, 0.5);
}

.AmbrTooltip.Rarity-2 {
	--fade-color: rgba(26, 58, 23, 0.5);
}

.AmbrTooltip.Rarity-3 {
	--fade-color: rgba(9, 53, 104, 0.5);
}

.AmbrTooltip.Rarity-4 {
	--fade-color: rgba(59, 35, 104, 0.5);
}

.AmbrTooltip.Rarity-5 {
	--fade-color: rgba(110, 77, 5, 0.5);
}

.AmbrTooltip .tag {
	padding: 0.1em 0.5em;
	color: rgb(255, 255, 255, 0.9);
	background-color: rgb(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	gap: 0.5em;
	border-radius: 0.3em;
}

.AmbrTooltip.hsr .tag {
	font-size: 1.05em;
	line-height: 1.25;
	font-weight: 600;
}

.AmbrTooltip.zzz .tag {
	font-size: 0.9em;
	line-height: 1.4;
}

.AmbrTooltip .tag-row {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.6em;
	row-gap: 0.2em;
}

.AmbrTooltip .scrollContent {
	display: block;
	text-align: left;
	margin-bottom: 0em;
	float: left;
	flex-grow: 1;
	overflow: hidden;
	min-height: 0;
}

.AmbrTooltip .keyboardArrowDown {
	position: absolute;
	height: 1.1rem;
	width: 1.1rem;
	fill: white;
	bottom: 0.15em;
	left: 50%;
	transform: translateX(-50%);
	display: block;
}

.AmbrTooltip .title {
	font-size: 1em;
	display: flex;
	opacity: 0.95;
	margin-top: 0.5em;
	gap: 0.3em;
	line-height: 1.3;
}

.AmbrTooltip.hsr .title {
	font-size: 1.05em;
	letter-spacing: 0.03em;
	font-weight: 600;
}

.AmbrTooltip.zzz .title {
	font-size: 0.9em;
	letter-spacing: 0.01em;
	line-height: 1.5;
	/* font-weight: 400; */
}

.AmbrTooltip .title.Active {
	color: lightgreen;
}

.AmbrTooltip .title.Inactive {
	opacity: 0.5;
}

.AmbrTooltip span.setPiece {
	color: wheat;
	background-color: rgb(0, 0, 0, 0.2);
	display: inline-block;
	flex-grow: 0;
	margin-top: -0.05em;
	border-radius: 0.2em;
	padding: 0.1em 0.4em;
	align-self: flex-start;
}

.AmbrTooltip span.weaponRefine {
	color: wheat;
}

.AmbrTooltip .description {
	font-family: "Open Sans";
	font-size: 0.9em;
	margin-top: 0.5em;
	color: rgba(255, 255, 255, 0.8);
}

.AmbrTooltip .description .textSvg {
	width: 1.4em;
	transform: translateY(25%);
}


.AmbrTooltip .description.Inactive {
	opacity: 0.5;
}

.AmbrTooltip .table {
	font-family: "Open Sans";
	font-size: 0.9em;
	margin-top: 0.8em;
	gap: 0.3em;
	opacity: 0.8;
	display: flex;
	flex-direction: column;
}

.AmbrTooltip .tableStat {
	font-size: 0.9em;
	padding: 0.2em 0.5em;
	opacity: 0.8;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border-radius: 0.3em;
	align-items: center;
	background-color: rgb(255, 255, 255, 0.1);
	background-blend-mode: overlay;
}

.tableStat>span:first-child {
	flex-grow: 1;
}

.tableStat>span:last-child {
	text-align: right;
}

.AmbrTooltip .contentGap {
	width: auto;
	height: 0.8em;
}

.AmbrTooltip hr {
	opacity: 0.4;
	color: white;
	margin: 1em 0;
}

.AmbrTooltip .lore {
	font-family: "Open Sans";
	font-size: 0.7em;
	opacity: 0.7;
}

.AmbrTooltip .copyright {
	font-family: "Open Sans";
	padding-top: 0.75em;
	font-style: italic;
	font-size: 0.8em;
	text-align: right;
	opacity: 0.4;
	position: relative;
	/* top: 0.75em; */
}

.AmbrTooltip svg {
	width: 1em;
}